<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>简途旅行</title>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/old/css/SDbargain/ranking.scss?__inline" media="screen" title="no_title" charset="utf-8">
</head>
<body style="visibility: hidden;">
<div class="header">
    <img src="/old/images/SDbargain/sdBargain_header@3x.png" alt=""/>
</div>
<div class="content">
    <div class="product">
        <img src="" alt=""/>
        <div class="name">【温泉】西岭雪山花水湾2日深度游（舒适型酒店+景区票）</div>
        <div class="info">
            <span class="price">售价:9999元</span>
            <span class="amount">还有9999个0元购名额</span>
        </div>
    </div>
    <div class="buttons">
        <a class="buy0">我要原价买</a>
        <a class="buy">我要"0元购"</a>
    </div>
    <div class="notify">
        已有500人参与该商品的砍价
    </div>
    <div class="rank-list">
        <div class="title">砍价排行榜</div>
        <table>
            <tbody>
            <tr>
                <th>排名</th>
                <th>用户</th>
                <th>砍后价格</th>
            </tr>
            <tr>
                <td>1</td>
                <td>151****8765</td>
                <td>35.31元</td>
            </tr>
            <tr>
                <td>2</td>
                <td>189****5582</td>
                <td>37.46元</td>
            </tr>
            <tr>
                <td>3</td>
                <td>131****5678</td>
                <td>37.63元</td>
            </tr>
            <tr>
                <td>4</td>
                <td>131****5678</td>
                <td>38.20元</td>
            </tr>
            <tr>
                <td>5</td>
                <td>131****5678</td>
                <td>38.92元</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="esoterica">
        <div class="e-title">砍价秘籍</div>
        <div class="e-content">
            1.输入手机号码，邀请好友帮忙砍价；<br/>
            2.每人在同一时段只能发起1个砍价，但可以帮多位好友砍价；<br/>
            3.在一个砍价中，每位好友都有1次帮砍机会，金额随机减少0.8-8元；<br/>
            4.帮砍成功，好友将获得简途特价产品购买机会；<br/>
            5.该产品价格砍至0元时，砍价成功，你将获得该旅行产品“0元购”名额1个，并无法再次发起其他砍价；<br/>
            6.若砍价过程中需要更换产品进行砍价，直接进入意向产品页面，点击“我要“0元购”“，放弃已发起的砍价即可；<br/>
            7.当该产品所有“0元购”名额被抢光时，该产品砍价活动结束，届时其他参与者砍价失败，产品恢复原价。
        </div>
    </div>
</div>
<div class="footer">
    <a href="">年终特惠,17去玩</a>
</div>
<!--<div class="modal-wrap">-->
<!--<div class="modal show">-->
<!--<div class="modal-content">-->
<!--<div class="text-content">-->
<!--你已成功获得稻亚六日游<br/>-->
<!--不能发起改商品砍价!-->
<!--</div>-->
<!--<div class="btns">-->
<!--<span class="yes">确定</span>-->
<!--<span class="no">取消</span>-->
<!--</div>-->
<!--<div class="close"></div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="modal-overlay visible"></div>-->
<!--</div>-->
<script type="text/javascript" src="/old/common/js/zepto.min.js"></script>
<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // 针对uc横竖屏rem html没有重绘的问题
                    var style;
                    if (style = document.getElementById("forhtml")) {
                        style.parentNode.removeChild(style);
                    }
                    style = document.createElement("style");
                    style.id = "forhtml";
                    document.head.appendChild(style);
                    style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
                };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
    $(document).ready(function () {
        (function ($) {
            function Modal(option, type) {
                var defaultOption = {
                    msg: '这里是文案',
                    yes: '确定',
                    cancel: false,
                    yesFun: function () {
                    },
                    cancelFun: function () {
                    }
                };
                var $modal, _this = this;
                var opts = $.extend(defaultOption, option);
                var html = '<div class="modal-wrap"><div class="modal"><div class="modal-content"><div class="text-content">'
                        + opts.msg + '</div><div class="btns"><span class="yes">确定</span>';
                if (opts.cancel) {
                    html += '<span class="no">取消</span>';
                }
                html += '</div></div></div><div class="modal-overlay"></div></div>';
                $modal = $(html).appendTo(document.body);
                $modal.on('click', '.no', function (e) {
                    _this.close($modal);
                    opts.cancelFun($(this).text());
                });
                $modal.on('click', '.yes', function (e) {
                    _this.close($modal);
                    opts.yesFun($(this).text());
                });
                _this.open = function () {
                    $modal.find('.modal').addClass('show');
                    $modal.find('.modal-overlay').addClass('visible');
                }
                _this.close = function () {
                    $modal.find('.modal').removeClass('show');
                    $modal.find('.modal-overlay').removeClass('visible');
                }
            }

            $.modal = function (option) {
                var modal = new Modal(option);
                modal.open();
            }
        })(Zepto);
        $('.buy0').click(function(e){
            $.modal({
                msg: '你已成功获得稻亚六日游<br/>不能发起改商品砍价!',
                yes: '确定',
                cancel: true,
                yesFun: function () {

                },
                cancelFun: function () {
                }
            });
        });
        $('.buy').click(function(e){
            $.modal({
                msg: '你已成功获得稻亚六日游<br/>不能发起改商品砍价!',
                yes: '确定',
                cancel: false,
                yesFun: function () {

                }
            });
        });
    });
</script>
</body>
</html>